<template>
  <el-dialog
    append-to-body
    :close-on-click-modal="false"
    class="custom-dialog"
    :class="{ 'hide-footer': $attrs.showFooter === false}"
    v-bind="$attrs"
  >
    <template #header v-if="proxy.$slots.header">
      <slot name="header" />
    </template>
    <slot />
    <span class="dialog-footer" v-if="$attrs.showFooter !== false">
      <template v-if="proxy.$slots.footer">
        <slot name="footer" />
      </template>
      <template v-else>
        <el-button type="primary" icon="CircleCheck" @click="handleDialogConfirm">{{$attrs.confirmText || "确定"}}</el-button>
        <el-button type="default" icon="CircleClose" @click="handleDialogClose">{{ $attrs.cancelText || "取消" }}</el-button>
      </template>
    </span>
  </el-dialog>
</template>

<script setup name="ComDialog">
const { proxy } = getCurrentInstance()

const emit = defineEmits()

const handleDialogConfirm = () => {
  emit("confirm", {})
}

const handleDialogClose = () => {
  emit("close", {})
}

</script>

<style lang="scss">
.el-dialog.custom-dialog {
  padding: 0;
  display: flex;
  flex-direction: column;
  width: var(--el-dialog-width);
  min-height: 180px;
  max-height: calc(100vh - 5vh - 50px);
  max-width: calc(100vw - 4vw);
  .el-dialog__header {
    border-bottom: 1px solid #f0f0f0;
    padding: 16px;
  }
  .el-dialog__body {
    padding: 10px 20px;
    padding-bottom: 60px;
    flex: 1;
    overflow: auto;
  }
  .dialog-footer {
    display: block;
    z-index: 2;
    border-top: 1px solid #f0f0f0;
    padding: 10px 16px;
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    background-color: #fff;
    text-align: right;
  }
}
.el-dialog.custom-dialog.hide-footer {
  .el-dialog__body {
    padding-bottom: 10px;
  }
}
</style>